<style include="cr-shared-style shimless-rma-shared">
  .small-icon {
    height: 20px;
    width: 20px;
  }

  #performUpdateButton {
    border-color: var(--google-blue-600);
    border-radius: 12px;
  }
</style>

<base-page orientation="column">
  <div slot="header">
    <h1>[[i18n('osUpdateTitleText')]]</h1>
    <div hidden$="[[isCompliant_]]">
      [[i18n('osUpdateInvalidComponentsDescriptionText')]]
    </div>
    <div hidden$="[[!isCompliant_]]">[[updateNoticeMessage_]]</div>
    <div id="versionInfo">
      <iron-icon id="updateIcon" class="small-icon"
          icon="[[getUpdateNoticeIcon_(updateAvailable_)]]">
      </iron-icon>
      [[currentVersionText_]]
    </div>
    <div id="progressMessage">
      <paper-spinner-lite hidden$="[[!updateInProgress_]]" active>
      </paper-spinner-lite>
      [[updateProgressMessage_]]
    </div>
    <p id="networkUnavailable" hidden$="[[networkAvailable]]">
      [[i18n('onboardingUpdateConnectToInternet')]]
    </p>
    <cr-button id="performUpdateButton" disabled="[[updateInProgress_]]"
        hidden$="[[!updateAvailable_]]" on-click="onUpdateButtonClicked_">
        [[updateVersionText_]]
      <iron-icon id="restartIcon" icon="shimless-icon:update"
          class="small-icon">
      </iron-icon>
    </cr-button>
  </div>
  <div slot="body">
    <iron-icon icon="shimless:update" class="large-icon"></iron-icon>
  </div>
</base-page>
